<!--
 * @Author: zhangjingyu
 * @Date: 2020-12-07 21:25:38
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2020-12-25 17:24:32
 * @FilePath: \vprisk10.14\src\components\ca\table\right.vue
 * @Description: 表格右侧
-->
<template>
  <div>
    <el-table ref="table" style="width: 100%">
      <table-column :tree="xJsonTree" :listx="listx"></table-column>
      <el-table-column
        align="center"
        label="合计"
        fixed="right"
        label-class-name="redFix"
        class-name="redFix"
      ></el-table-column>
      <el-table-column
        align="center"
        label="折算比"
        fixed="right"
        label-class-name="redFix"
        class-name="blueFix"
      ></el-table-column>
    </el-table>
   


    <el-row v-if="listx.length>0&&listy.length>0" style="display:flex"> 
      <!-- input部分 -->
      <el-col v-for="(item,i) in listy" :key="i" :style="'flex:'+100/(listy.length+2)+'%'">
      <div  v-for="(them,j) in listx" :key="j" style="width:100%;line-height:40px;height:40px;text-align:center" >
        <el-input  :x="item" :y="them" ref="inp" v-model.trim="allValue[getIndex(item,them)]" @blur="getAllValue(getIndex(item,them),them,j)" size="mini" :readonly="readonly"></el-input>
      </div>
      </el-col>
      <!-- 合计部分 -->
      <el-col :style="'color:red;text-align:center;line-height:40px;flex:'+100/(listy.length+2)+'%'"> 
       <div v-for="(hj,k) in listx" :key="k" style="width:100%;line-height:40px;height:40px;text-align:center" >
       {{getTotal(hj,k)}}
      </div>
      <!-- 折算比 -->
      </el-col>
       
      <el-col :style="'color:red;text-align:center;line-height:40px;flex:'+100/(listy.length+2)+'%'">
      <div  v-for="(zsb,l) in listx" :key="l" style="width:100%;line-height:40px;height:40px;text-align:center" >
       {{(getTotal(zsb,l)?(1/getTotal(zsb,l)):0).toFixed(6)}}
      </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 数组拼接函数，拼接个数为i+1
function concatArrs(arr, i) {
  if (i === 0) return arr;
  function fn(newArr, j) {
    if (j > 0) {
      newArr = newArr.concat(arr);
      j--;
      return fn(newArr, j);
    } else {
      return newArr;
    }
  }
  return fn(arr, i);
}
// 数组排列组合算法*******
function arrPAC(list) {
  let results = [];
  let result = [];
  doExchange(list, 0);
  function doExchange(arr, index) {
    for (var i = 0; i < arr[index].length; i++) {
      result[index] = arr[index][i];
      if (index != arr.length - 1) {
        doExchange(arr, index + 1);
      } else {
        results.push(result.join(","));
      }
    }
  }
  return results;
}

import tableColumn from "./tableColumn";
import { listToTree } from "@/lib/util";
export default {
  components: {
    tableColumn,
  },
  name: "tableRight",
  data() {
    return {
      getTotals: 0,
      tableData: [],
      listx: [],
      listy: [],
      xJsonTree:[],
      xyChange:true,
      //格子仅支持1000个
      allValue:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
      0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
      0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
      0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
      0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
      0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
      0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
      0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
      0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
      0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,],
    };
  },
  computed: {
    
  },
  props: {
    xJson: {
      type: Array,
      default: () => {
        return [];
      },
    },
    yJson: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tableValue: {
      type: Array,
      default: () => {
        return [];
      },
    },
    readonly:{
      type: Boolean,
      default: false
    }
  },
  created() {
    this.tableValuetoData();
  },
  watch:{
    xJson:{
      handler(){
      this.xyChange = true;
      this.tableValuetoData();
      },
      deep:true
    },
    yJson:{
        handler(){
      this.xyChange = true;
      this.tableValuetoData();
      },
      deep:true
    },
    tableValue(){
      this.xyChange = false;
      this.tableValuetoData();
    }
  },
  methods: {
    initdata() {
      if(this.tableValue.length==0){
      let a = this.listy.length,b = this.listx.length;

        let arr = this.$refs["inp"]
        // let arr = document.querySelectorAll('.inp')
        console.log(arr,'****')
        for (let i = 0; i < a*b; i++) {
          let obj = {}
          obj.x = arr[i].$attrs.x;
          obj.y = arr[i].$attrs.y;
          // 1218
          obj.v = 0
        this.tableValue.push(obj)
        }

      }else{
        console.log(this.tableValue,'有值')
        for (let i = 0; i < this.tableValue.length; i++) {
          if(this.tableValue[i].v == ''){
            this.tableValue[i].v == 0
          }
          this.allValue[i] = this.tableValue[i].v
          // 1218
          if(this.allValue[i] == ""){
            this.allValue[i] = 0
          }
          
          //
        }
        this.$forceUpdate();
      }
    },
    // 获取index
    getIndex(a,b){
      let index = this.tableValue.findIndex(item=>{
        return item.x==a&&item.y==b;
      })
      console.log(index,'INDEX')
     return index;
    },
    // 处理数据
    tableValuetoData() {
      let arrx = this.$clone(this.yJson);
      for (let i = 0; i < arrx.length; i++) {
        arrx[i] = this.unique(arrx[i], "code");
      }
      let arry = this.$clone(this.xJson);
      for (let i = 0; i < arry.length; i++) {
        arry[i] = this.unique(arry[i], "code");
      }
      // x
      let listx = [];
      for (let i = 0; i < arrx.length; i++) {
        let str = [];
        for (let l = 0; l < arrx[i].length; l++) {
          str.push(arrx[i][l].code);
        }
        listx.push(str);
      }
      listx = arrPAC(listx);
      for (let i = 0; i < listx.length; i++) {
        listx[i] = listx[i].replace(/,/g, "@@@");
      }
      this.listx = listx;
      //y
      let listy = [];
      for (let i = 0; i < arry.length; i++) {
        let str = [];
        for (let l = 0; l < arry[i].length; l++) {
          str.push(arry[i][l].code);
        }
        listy.push(str);
      }
      listy = arrPAC(listy);
      for (let i = 0; i < listy.length; i++) {
        listy[i] = listy[i].replace(/,/g, "@@@");
      }
      this.listy = listy;

      console.log(listx, listy, "---", this.tableValue);
      let tableList = [];
      for (let i = 0; i < listy.length; i++) {
        let obj = {};
        for (let l = 0; l < listx.length; l++) {
          this.$set(obj, listx[l], "");
        }
        tableList.push(obj);
      }
      this.tableData = tableList;

      console.log(tableList,"table");
      // 如果是xy轴变动，才获取tree
      if(this.xyChange){
        this.getxJsonTree();
      }
      this.$nextTick(()=>{
      this.initdata()

      })
    },
    getxJsonTree() {
      this.xJsonTree =[]; 
      let arr = [];let arr1 = this.$clone(this.xJson)
      arr.length = this.xJson.length;
      for (let i = 0; i < arr1.length; i++) {
        arr[i] = this.unique(arr1[i], "code");
      }
      let num = this.xJson.length;
      console.log(num,'NUM')
      // 转为带children的格式
      // for (let j = 0; j < arr.length; j++) {
       if(arr[0]){
          for (let k = 0; k < arr[0].length; k++) {
          arr[0][k].myid = '1';
          arr[0][k].pid = '0';
        }
       }
        if(arr[1]){
          for (let k1 = 0; k1 < arr[1].length; k1++) {
          arr[1][k1].myid = '2';
          arr[1][k1].pid = '1';
        }
       }
        if(arr[2]){
          for (let k2 = 0; k2 < arr[2].length; k2++) {
          arr[2][k2].myid = '3';
          arr[2][k2].pid = '2';
        }
       }
      // }
      let newArr = [];
      for (let m = 0; m < arr.length; m++) {
        for (let n = 0; n < arr[m].length; n++) {
          newArr.push(arr[m][n]);
        }
      }
       let tree = listToTree("myid", "pid", newArr);
      // //如果为两层
      // if (num === 2) {
      //   for (let i = 0; i < tree.length; i++) {
      //     for (let j = 0; j < tree[i].children.length; j++) {
      //         tree[i].children[j].code = tree[i].code+ "@@@" + tree[i].children[j].code;
      //     }
      //   }
      // } 
      // //如果为3层
      // if (num === 3) {
      //   for (let i = 0; i < tree.length; i++) {
      //     for (let j = 0; j < tree[i].children.length; j++) {
      //       for (let k = 0; k < tree[i].children[j].children.length; k++) {
      //         tree[i].children[j].children[k].code =
      //           tree[i].code +
      //           "@@@" +
      //           tree[i].children[j].code +
      //           "@@@" +
      //           tree[i].children[j].children[k].code;
      //       }
      //     }
      //   }
      // }
      this.xJsonTree =tree;
      console.log('TREE',this.xJsonTree)
      // return tree;
    },
    getAllValue(index,m,i){
      
      let n = this.allValue[index];
      console.log(index,'index')
     this.allValue[index] =  (n<1?(1*n):0).toFixed(6)
      // console.log(this.tableValue[index],this.tableValue,'this.tableValue[index]')
      if(this.tableValue[index]){
          this.tableValue[index].v = this.allValue[index]
      } else{
          // this.tableValue=[]
          // this.initdata()
      }
      // 调用合计计算的函数，再进行判断，不能再计算函数里写操作
     this.getTotals = this.getTotal(m,i)

      this.$forceUpdate()
       if(this.getTotals>1){
        setTimeout(()=>{
          this.$message.warning('合计不能超过1')
        },10)
        this.allValue[index] = 0
      }
    },
    getTotal(item,index){
      let num = 0
      for (let i = 0; i < this.tableValue.length; i++) {
        if(this.tableValue[i].y ==item) {
            num += (this.tableValue[i].v*1)
        }
        //
      }
      // console.log('num+++++++++++++',num)
      return num
    },  
    // 去重
    unique(arr, attribute) {
      var new_arr = [];
      var json_arr = [];
      for (var i = 0; i < arr.length; i++) {
        // console.log(new_arr.indexOf(arr[i][attribute]));
        if (new_arr.indexOf(arr[i][attribute]) == -1) {
          //  -1代表没有找到
          new_arr.push(arr[i][attribute]); //如果没有找到就把这个name放到arr里面，以便下次循环时用
          json_arr.push(arr[i]);
        } else {
        }
      }
      // return concatArrs(json_arr,j);
      return json_arr;
    },

  },
};
</script>

<style lang="scss" scoped>
// /deep/.el-table__empty-block{
//   height: ;
// }
/deep/.redFix {
  .cell {
    color: red !important;
  }
}
/deep/.blueFix {
  color: blue !important;
}
/deep/.el-table__empty-block{
  display: none;
}
/deep/.el-table th > .cell{
  height: 40px;
}
</style>